<template>
  <div class="majorEvents-container">
    <div class="header-wrap">
      <div></div>
      <div class="header-filter-wrap">
        <div :class="{'item': true, 'active': typeActive === index}" v-for="(item, index) in typeList" :key="index"
             @click="handleClickFilter(index)">
          {{ item.label }}
          <div class="triangle" v-if="typeActive === index"></div>
          <i class="el-icon-check" v-if="typeActive === index"></i>
        </div>
      </div>
      <div class="btn-wrap">
<!--        <el-button plain @click="exportPage">导出</el-button>-->
      </div>
    </div>

    <div class="main-wrap">
      <div class="scroll-wrap">
        <div :class="{'item': true, 'first': index===0, 'last': index === stepDataC.length-1}"
             v-for="(item, index) in stepDataC" :key="index">
          <div class="item-left">
            <div class="date">{{ item.date }}</div>
            <div class="circular"></div>
          </div>
          <div :class="{'item-right': true}">
            <div class="right-box">
              <div class="row1">{{ item.row1 }}</div>
              {{ item.row2 }}<br>
              <div v-if="item.row3">{{ item.row3 }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  computed: {
    stepDataC() {
      return this.stepData.filter((item) => this.typeActive === item.code || this.typeActive === 0)
    }
  },
  data() {
    return {
      typeActive: 0,
      typeList: [
        {
          label: '全部',
        },
        {
          label: '阶段',
        },
        {
          label: '协议',
        },
        {
          label: '交易',
        },
        {
          label: '三会',
        },
        {
          label: '估值',
        },
        {
          label: '风险',
        },
        {
          label: '重大事件',
        },
      ],
      stepData: [
        {
          date: '2022-11-03',
          code: 5,
          row1: '估值变更：「最新估值2,560,000.00元」',
          row2: '估值时间：2022-11-03   22:30:23',
          row3: '',
        },
        {
          date: '2022-10-03',
          code: 5,
          row1: '估值变更：「最新估值2,560,000.00元」',
          row2: '估值时间：2022-10-03   22:30:23',
          row3: '',
        },
        {
          date: '2022-09-30',
          code: 4,
          row1: '召开三会：「会议名称」',
          row2: '会议类型：董事会',
          row3: '会议时间：2022-09-30   22:30:23',
        },
        {
          date: '2022-09-27',
          code: 3,
          row1: '项目交易：「1,380,000.00」',
          row2: '交易类型：项目分红',
          row3: '回款时间：2022-09-27   22:30:23',
        },
        {
          date: '2022-09-20',
          code: 3,
          row1: '项目交易：「2,560,000.00」',
          row2: '交易类型：出资',
          row3: '付款时间：2022-09-20   22:30:23',
        },
        {
          date: '2022-08-18',
          code: 1,
          row1: '推进阶段：由「协议签署」推进到「项目交割」',
          row2: '修改人：宋翊',
          row3: '推进时间：2022-08-18   22:30:23',
        },
        {
          date: '2022-08-15',
          code: 2,
          row1: '协议签署：「华润三九项目投资协议」',
          row2: '协议类型：投资协议',
          row3: '签署日期：2022-08-15   ',
        },
        {
          date: '2022-08-12',
          code: 1,
          row1: '推进阶段：由「投决阶段」推进到「协议签署」',
          row2: '修改人：宋翊',
          row3: '推进时间：2022-08-12   22:30:23',
        },
        {
          date: '2022-08-03',
          code: 1,
          row1: '推进阶段：由「尽调阶段」推进到「投决阶段」',
          row2: '修改人：宋翊',
          row3: '推进时间：2022-08-03   22:30:23',
        },
        {
          date: '2022-07-25',
          code: 1,
          row1: '推进阶段：由「立项阶段」推进到「尽调阶段」',
          row2: '修改人：宋翊',
          row3: '推进时间：2022-07-25   22:30:23',
        },
        {
          date: '2022-07-22',
          code: 1,
          row1: '新建项目：「华润三九项目」',
          row2: '修改人：宋翊',
          row3: '创建时间：2022-07-22   12:30:23',
        },
      ],
    }
  },
  methods: {
    handleClickFilter(index) {
      this.typeActive = index;
    },
    exportPage() {
      window.print();
    }
  }
}
</script>

<style scoped lang="less">
.majorEvents-container {
  padding: 0 90px;

}
.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-filter-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 30px 0;

  .item {
    cursor: pointer;
    width: 72px;
    height: 32px;
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #D9D9D9;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
    line-height: 32px;
    letter-spacing: 0;
    color: #212121;
    position: relative;
    margin: 0 6px;

    .triangle {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-bottom: 18px solid #5582F3;
      border-left: 18px solid transparent;
    }

    .el-icon-check {
      position: absolute;
      color: #fff;
      right: 0;
      bottom: 0;
    }

    &.active {
      border: 1px solid #5582F3;
    }
  }
}

.scroll-wrap {
  position: relative;

  .item {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    &.first {
      .item-right {
        &:after {
          content: '';
          width: 10px;
          height: 15px;
          background-color: #fff;
          position: absolute;
          left: -5px;
          top: -3px;
        }
      }
    }

    &.last {
      .item-right {
        &:before {
          content: '';
          width: 10px;
          height: 100%;
          background-color: #fff;
          position: absolute;
          left: -5px;
          top: 20px;
        }
      }
    }
  }

  .item-left {
    width: 20%;
    position: relative;
    text-align: right;
    padding-right: 30px;
    padding-top: 11px;

    .activity-list-start {
      position: absolute;
      right: -27px;
      top: 0;
      width: 45px;
      z-index: 10;
    }

    .only-one-border {
      position: absolute;
      background-color: #fff;
      right: -10px;
      top: 20px;
      width: 12px;
      height: 70px;
    }

    .date {
      font-size: 14px;
      color: #999999;
    }

    .circular {
      position: absolute;
      right: -8px;
      top: 12px;
      width: 12px;
      height: 12px;
      border: 2px solid #26890d;
      border-radius: 100%;
      background-color: #fff;
      z-index: 20;
    }
  }

  .item-right {
    position: relative;
    width: 80%;
    word-break: break-all;
    border-left: 1px solid #E5E5E5;
    padding-left: 20px;
    font-size: 14px;
    color: #000;
    padding-bottom: 20px;

    .right-box {
      font-size: 12px;
      color: #666666;
      padding: 12px;
      border-radius: 2px;
      opacity: 1;
      background: #FAFAFA;
      box-sizing: border-box;
      border: 1px solid #E5E5E5;
      line-height: 18px;

      .row1 {
        color: #212121;
      }
    }

    &.last {

    }
  }
}

</style>